<template>
  <el-row justify="end">
    <el-button @click="openForm">
      <Icon class="mr-5px" icon="ep:edit" />
      {{ project.id ? '编辑项目信息' : '新增项目信息' }}
    </el-button>
  </el-row>
  <el-row :gutter="20">
    <!-- 右侧操作日志 -->
    <el-col :span="10" :xs="24">
      <OperateLogV2 :log-list="logList" />
    </el-col>
  </el-row>

  <label class="font-bold">能源报装类别</label>
  <ProjectEnergyList :key="projectEnergyListRefKey" ref="projectEnergyListRef" :project="project" />
  <label class="font-bold">生产线建设现状</label>

  <ProjectProductionList
    :key="projectProductionListRefKey"
    ref="projectProductionListRef"
    :project="project"
  />
  <label class="font-bold">车间、生产线图纸资料</label>
  <ProjectWorkshopList
    :key="projectWorkshopListRefKey"
    ref="projectWorkshopListRef"
    :project="project"
  />
  <label class="font-bold">电气方案、图纸资料</label>
  <ProjectElectricList
    :key="projectElectricListRefKey"
    ref="projectElectricListRef"
    :project="project"
  />
  <label class="font-bold">废水管道方案、图纸资料</label>
  <ProjectPipelineList
    :key="projectPipelineListRefKey"
    ref="projectPipelineListRef"
    :project="project"
  />
  <label class="font-bold">废气治理方案、图纸资料</label>
  <ProjectGasList :key="projectGasListRefKey" ref="projectGasListRef" :project="project" />
  <label class="font-bold">其他工程方案、图纸资料（如有）</label>
  <ProjectOtherList :key="projectOtherListRefKey" ref="projectOtherListRef" :project="project" />
  <label class="font-bold">项目验收资料</label>
  <ProjectCheckList :key="projectCheckListRefKey" ref="projectCheckListRef" :project="project" />

  <ContentWrap>
    <el-collapse v-model="activeNames" class="">
      <el-collapse-item name="systemInfo">
        <template #title>
          <span class="text-base font-bold">系统信息</span>
        </template>
        <el-descriptions :column="4">
          <el-descriptions-item label="创建人">{{ project.creatorName }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDate(project.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="修改人">{{ project.updaterName }}</el-descriptions-item>
          <el-descriptions-item label="修改时间">
            {{ formatDate(project.updateTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
  </ContentWrap>
  <!-- 表单弹窗：添加 -->
  <ProjectForm ref="formRef" @success="refresh" />
</template>
<script lang="ts" setup>
import { ProjectApi, ProjectVO } from '@/api/crm/project'
import ProjectElectricList from '@/views/crm/project/components/ProjectElectricList.vue'
import ProjectEnergyList from '@/views/crm/project/components/ProjectEnergyList.vue'
import ProjectOtherList from '@/views/crm/project/components/ProjectOtherList.vue'
import ProjectGasList from '@/views/crm/project/components/ProjectGasList.vue'
import ProjectPipelineList from '@/views/crm/project/components/ProjectPipelineList.vue'
import ProjectProductionList from '@/views/crm/project/components/ProjectProductionList.vue'
import ProjectWorkshopList from '@/views/crm/project/components/ProjectWorkshopList.vue'
import ProjectCheckList from '@/views/crm/project/components/ProjectCheckList.vue'
import ProjectForm from '@/views/crm/project/ProjectForm.vue'
import { formatDate } from '@/utils/formatTime'
import { BizTypeEnum } from '@/api/crm/permission'
import type { OperateLogVO } from '@/api/system/operatelog'
import { getOperateLogPage } from '@/api/crm/operateLog'

defineOptions({ name: 'ProjectDetail' })
const props = defineProps<{ id?: number; bizId?: number }>()
const route = useRoute()

const formRef = ref()
const projectElectricListRefKey = ref(new Date().getTime())
const projectEnergyListRefKey = ref(new Date().getTime())
const projectGasListRefKey = ref(new Date().getTime())
const projectOtherListRefKey = ref(new Date().getTime())
const projectCheckListRefKey = ref(new Date().getTime())
const projectPipelineListRefKey = ref(new Date().getTime())
const projectProductionListRefKey = ref(new Date().getTime())
const projectWorkshopListRefKey = ref(new Date().getTime())
const formLoading = ref(false) // 表单的加载中
const project = ref<ProjectVO>({} as ProjectVO) // 企业工商信息详情
const openForm = () => {
  formRef.value.open(project.value.id ? 'update' : 'create', project.value.id, props.bizId)
}
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => props.bizId,
  async (val) => {
    if (!val) {
      return
    }
    try {
      formLoading.value = true
      const data = await ProjectApi.getProjectByCustomerId(val)
      if (!data) {
        return
      }
      project.value = data
      await getOperateLog()
    } finally {
      formLoading.value = false
    }
  },
  { immediate: true }
)

/** 获取操作日志 */
const logList = ref<OperateLogVO[]>([]) // 操作日志列表
const getOperateLog = async () => {
  if (!project.value.id) {
    return
  }
  const data = await getOperateLogPage({
    bizType: BizTypeEnum.CRM_PROJECT,
    bizId: project.value.id
  })
  logList.value = data.list
}

const activeNames = ref(['basicInfo', 'systemInfo']) // 展示的折叠面板
const refresh = async () => {
  projectElectricListRefKey.value = new Date().getTime()
  projectEnergyListRefKey.value = new Date().getTime()
  projectGasListRefKey.value = new Date().getTime()
  projectOtherListRefKey.value = new Date().getTime()
  projectCheckListRefKey.value = new Date().getTime()
  projectPipelineListRefKey.value = new Date().getTime()
  projectProductionListRefKey.value = new Date().getTime()
  projectWorkshopListRefKey.value = new Date().getTime()
  try {
    formLoading.value = true
    const data = await ProjectApi.getProjectByCustomerId(props.bizId)
    if (!data) {
      return
    }
    project.value = data
    await getOperateLog()
  } finally {
    formLoading.value = false
  }
}

/** 初始化 */
onMounted(async () => {
  const id = props.id || route.params.id
  const customerId = props.bizId
  try {
    formLoading.value = true
    if (customerId) {
      const data = await ProjectApi.getProjectByCustomerId(customerId)
      if (!data) {
        return
      }
      project.value = data
    } else {
      if (id) {
        const data = await ProjectApi.getProject(id)
        if (!data) {
          return
        }
        project.value = data
      }
    }
    await getOperateLog()
  } finally {
    formLoading.value = false
  }
})
</script>
